import eslint from '@eslint/js';
import { defineConfig } from 'eslint/config';
import eslintConfigPrettier from 'eslint-config-prettier';
import eslintPluginVue from 'eslint-plugin-vue';
import globals from 'globals';
import typescriptEslint from 'typescript-eslint';
import vueParser from "vue-eslint-parser"

export default defineConfig([
  { ignores: ['*.d.ts', '**/coverage', '**/dist'] },

  {
    files: ['**/*.js'],
    extends: [
      eslint.configs.recommended,
    ],
  },

  {
    extends: [
      ...typescriptEslint.configs.recommended,
      ...eslintPluginVue.configs['flat/recommended'],
    ],
    files: ['**/*.{ts,vue}'],
    languageOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      globals: globals.browser,
      parser: vueParser,
      parserOptions: {
        "parser": {
          "js": "espree",
          "ts": typescriptEslint.parser,
          // 在 Vue 模板中解析指令和插值表达式时使用的解析器
          // v-if v-for :class {{}} 等
          // 但这只是模板语法的配置，不是变量使用的检查
          // vueParse 无法识别模板中使用的变量，这是 eslint 本身的限制
          "<template>": "espree",
        }
      },
    },
    rules: {
      "no-console": "off",
      // 关闭 Vue 组件必须多单词命名的规则（允许如 Home.vue index.vue）
      'vue/multi-word-component-names': 'off',

      // 目前为止识别不了 <template> 中 :class 用到了 <script setup> 中的变量
      '@typescript-eslint/no-unused-vars': 'off'
    },
  },
  eslintConfigPrettier
]);
